<template>
  <div id="Archive">
    <div id="middle-nav">
      <ul>
        <li>当前位置:</li>
        <li>归档</li>
        <li>></li>
        <li>文章</li>
      </ul>
    </div>
    <div id="content">
      <ul>
        <li v-for="(arItem,index) in ArticleData.slice(0,loadNum)" :key="arItem.id">
          <h2>{{arItem.title}}</h2>
          <h6>作者：{{arItem.autor}}</h6>
          <h6>时间：{{arItem.time}}</h6>
          <div id="text" v-html="arItem.content" v-highlight></div>
          <div id="review">
            <span @click="review(index)">评论{{reviewNum(arItem.id)}}</span>
            <span><i class="isActive" ref="ele" @click="likeClick(arItem.id,$event)"></i>{{likeNum(arItem.id,index)}}</span>
          </div>
          <div v-show="revColumnShow == index" id="revColumn">
            <ul>
              <li v-for="revitem in ArticleRevData" v-if="revitem.articleid == arItem.id ">
                <span>{{revitem.autor}}</span>
                <span>:</span>
                <span>{{revitem.content}} </span>
                <span>{{revitem.time}}</span>
              </li>
            </ul>
            <div id="pubRev">
              <input type="text" id="revname" placeholder="评论人" v-model="revData.revName">
              <textarea id="revContent" placeholder="说点什么吧！！！" v-model="revData.revCon"></textarea>
              <button @click="publish(arItem.id)">发表评论</button>
            </div>
          </div>
          <div id="gap"></div>
        </li>
      </ul>
    </div>
    <div id="load" @click="getMoreData">点击我加载更多</div>
  </div>



</template>

<script>
  export default {
    name: "Archive",

    data() {
      return {
        ArticleData: [],
        ArticleRevData: [],
        ArticleRev: [],
        loadNum: 1,
        likenum: [],
        revColumnShow: -1,
        revData: {
          revName: "",
          revCon: "",
          time: "",
          articleid: "",
        },
      }
    },
    computed: {
      //计算评论人数
      reviewNum() {
        return function (value) {
          var j = 0;
          var newArr = this.ArticleRevData;
          for (let i = 0; i < newArr.length; i++) {
            if (newArr[i].articleid == value) {
              j++
            }
          }
          return j
        }
      },
      //计算点赞人数
      likeNum() {
        return function (value, Index) {
          let Arr = this.likenum;
          let uuid = localStorage.getItem("userUuid")
          let count = 0;
          //计算当前说说的点赞条数
          Arr.map((a) => {
            if (a.articleid == value) {
              count++
            }
            return count
          })
          //判断该浏览器登录用户当前文章有没有点过赞
          if (Arr.length !== 0) {
            this.$nextTick(() => {
              let ff = this.$refs.ele
              for (let i = 0; i < Arr.length; i++) {
                if (Arr[i].uuid == uuid) {
                  if (Arr[i].articleid == value) {
                    ff[Index].className = "active"
                  }
                }
              }
            })
          }
          return count
        }
      },

    },
    methods: {
      getMoreData() {
        this.loadNum += 1
      },
      review(index) {
        if (this.revColumnShow == index) {
          this.revColumnShow = -1;

        } else {
          this.revColumnShow = index;
        }
      },
      //发表文章评论
      publish(articleid) {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let time = year + "-" + month + "-" + day
        this.revData.time = time;
        this.revData.articleid = articleid;
        if (this.revData.revName !== "" && this.revData.revData !== "") {
          fetch(process.env.VUE_APP_API_URL+"/artReview", {
            method: 'post',
            body: JSON.stringify(this.revData),
            headers: new Headers({
              'Content-Type': 'application/json'
            })
          })
            .then((res) => {
              return res.json()
            })
            .then((data) => {
              if (data == "发布成功") {
                Object.assign(this.$data.revData, this.$options.data().revData)
                // this.$router.push('/Archive')
                // location.reload();
              }
            })
            .catch((error) => { console.error('Error:', error) })

        } else {
          alert("请输入评论人和内容！！")
        }
      },

      //文章点赞
      likeClick(value, e) {
        let likeData = {
          "ifClick": false,
          "idNum": value,
          "useruuid": ""
        }
        likeData.useruuid = localStorage.getItem("userUuid")

        let ele = e.target
        let elepro = e.target.getAttribute("class");
        if (elepro == "isActive") {
          ele.setAttribute("class", "active");
          likeData.ifClick = true;

        } else {
          ele.setAttribute("class", "isActive");
          likeData.ifClick = false;
        }
        fetch(process.env.VUE_APP_API_URL+"/articleLike", {
          method: 'post',
          body: JSON.stringify(likeData),
          headers: new Headers({
            'Content-Type': 'application/json'
          })
        })
          .then((res) => {
            return res.json()
          })
          .then((data) => {
            this.getLike()
          })
          .catch((error) => { console.error('Error:', error) })
      },
      //请求点赞数据库
      getLike() {
        let uuid = localStorage.getItem("userUuid")
        let a = { "value": "true", "key": uuid };
        fetch(process.env.VUE_APP_API_URL+"/artLikeNum", {
          method: 'post',
          body: JSON.stringify(a),
          headers: new Headers({
            'Content-Type': 'application/json'
          })
        })
          .then((res) => {
            return res.json()

          })
          .then((data) => {
            this.likenum = data
            // console.log(data)
          })
          .catch((error) => { console.error('Error:', error) })
      },
    },
    created() {
      //请求文章的数据
      fetch(process.env.VUE_APP_API_URL+"/Archive", {
        method: 'post',
        headers: new Headers({
          //'application/json'
          'Content-Type': 'application/json'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.ArticleData = data.reverse();
          // console.log(this.ArticleData)
        })
        .catch((error) => { console.error('Error:', error) }),


        //请求文章下面的评论内容
        fetch(process.env.VUE_APP_API_URL+"/ArchiveRev", {
          method: 'post',
          headers: new Headers({
            //'application/json'
            'Content-Type': 'application/json'
          })
        })
          .then((res) => {
            return res.json()
          })
          .then((data) => {
            this.ArticleRevData = data
            // console.log(this.ArticleRevData)
          })
          .catch((error) => { console.error('Error:', error) })

          //请求点赞数据
          this.getLike()
    }


  };
</script>

<style scoped>
  #middle-nav {
    background-color: white;
    color: gray;
  }

  #middle-nav>ul {
    vertical-align: middle;
  }

  #middle-nav>ul>li {
    float: left;
    margin: 10px 0 10px 10px;

  }

  #middle-nav>ul>li:first-child {
    padding-right: 10px;
    padding-left: 10px;
  }

  #content {
    width: 590px;
    height: 760px;
    margin-top: 5px;
    /* background-color: white; */
    /* display: inline-block; */
    overflow: scroll;
    overflow-x: hidden;
  }

  #content>ul {
    width: 100%;
    height: 100%;

  }

  #content>ul>li {
    margin-bottom: 10px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
  }

  #content h2 {
    text-align: center;
    margin-top: 15px;
  }

  #content h6 {
    text-align: right;
    margin-right: 30px;
  }

  #text {
    border-top: 1px solid rgb(223, 217, 217);
    height: 300px;
    width: 100%;
    margin-top: 10px;
  }

  #review {
    width: 100%;
    height: 40px;
    /* background: greenyellow; */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #review>span>.isActive {
    display: inline-block;
    background: url("../assets/images/good.png");
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    vertical-align: middle;
  }

  #review>span>.active {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url("../assets/images/redgood.png");
    background-size: 100% 100%;
    vertical-align: middle;
  }


  #review span:first-child {
    margin-right: 100px;
    cursor: pointer;
  }

  #review span:last-child {
    margin-left: 100px;
    cursor: pointer;
  }

  #gap {
    width: 100%;
    height: 30px;
    background: url("../assets/images/gap.jpg");
    background-size: 120px 30px;
  }

  #revColumn {
    font-size: 10px;
  }

  #revColumn>ul>li {
    border-top: grey 1px solid;
    border-bottom: grey 1px solid;
    width: 590px;
    display: flex;

  }

  #revColumn>ul>li>span:first-child {
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  #revColumn>ul>li>span:nth-child(2) {
    font-size: 16px;
  }

  #revColumn>ul>li>span:nth-child(3) {
    padding-left: 10px;
    padding-right: 10px;
    border-right: grey 1px solid;
    width: 360px;
  }

  #revColumn>ul>li>span:last-child {
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  #pubRev {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }

  #pubRev>#revname {
    height: 30px;
    width: 100px;
    margin-left: 10px;
  }

  #pubRev>#revContent {
    height: 30px;
    border-left: 1px solid grey;
    width: 370px;
    resize: none;
    /* line-height: 30px; */
  }

  #pubRev>#revContent::placeholder {
    line-height: 30px;
  }

  #pubRev>input {
    border: none;

  }

  #pubRev>button {
    margin-left: 10px;
    width: 80px;
    height: 30px;
    background-color: rgb(50, 114, 225);
    border-radius: 6px;
    font-weight: bold;
    color: rgb(176, 173, 173);
  }


  #load {
    width: 590px;
    height: 40px;
    margin-top: 5px;
    background-color: white;
    text-align: center;
    line-height: 40px;
  }
</style>